/*eslint-disable*/
import React from "react";
import { connect, useDispatch, useSelector } from "react-redux";
import { Creators as SignupCreators } from "redux/actions/signup";
import { END } from "redux-saga";
// react plugin for creating date-time-picker
import Datetime from "react-datetime";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Tooltip from "@material-ui/core/Tooltip";
import Popover from "@material-ui/core/Popover";
import Checkbox from "@material-ui/core/Checkbox";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import Close from "@material-ui/icons/Close";
import Notifications from "@material-ui/icons/Notifications";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Assignment from "@material-ui/icons/Assignment";
import Mail from "@material-ui/icons/Mail";
import Face from "@material-ui/icons/Face";
import Timeline from "@material-ui/icons/Timeline";
import Code from "@material-ui/icons/Code";
import Group from "@material-ui/icons/Group";
import Email from "@material-ui/icons/Email";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import LockIcon from "@material-ui/icons/Lock";
import Check from "@material-ui/icons/Check";
import AttachFile from "@material-ui/icons/AttachFile";
import Layers from "@material-ui/icons/Layers";
import AppsIcon from "@material-ui/icons/Apps";
import ViewDayIcon from "@material-ui/icons/ViewDay";
import ViewCarousel from "@material-ui/icons/ViewCarousel";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Instruction from "components/Instruction/Instruction.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import CustomFileInput from "components/CustomFileInput/CustomFileInput.js";
import InfoArea from "components/InfoArea/InfoArea.js";
import Accordion from "components/Accordion/Accordion.js";
import ImageUpload from "components/CustomUpload/ImageUpload.js";

import javascriptStyles from "assets/jss/nextjs-material-kit-pro/pages/componentsSections/javascriptStyles.js";

const useStyles = makeStyles(javascriptStyles);
const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

Transition.displayName = "Transition";

function SignupModal() {
  const [signupModal, setSignupModal] = React.useState(false);
  const [checked, setChecked] = React.useState([]);
  const [message, setMessage] = React.useState("");
  let valueObj = { email: "", password: "", confirm_password: "" };
  const [inputValues, setInputValues] = React.useState(valueObj);
  const error = useSelector((state) => state.signup.error);

  const classes = useStyles();
  const dispatch = useDispatch();

  const handleToggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setChecked(newChecked);
  };

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    console.log("handleInputChange===>", id, value);

    setInputValues({ ...inputValues, [id]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputValues, checked);
    if (inputValues.email.length <= 6) {
      setMessage("请填写正确的邮箱地址");
      return;
    }
    if (inputValues.password.length <= 6) {
      setMessage("密码长度不得少于6位");
      return;
    }
    if (inputValues.confirm_password !== inputValues.password) {
      setMessage("两次输入密码不匹配");
      return;
    }
    if (checked.length !== 1 && checked[0] != 1) {
      setMessage("请先同意用户协议、隐私政策");
      return;
    }
    dispatch(SignupCreators.getRequest(inputValues));
    setMessage("");
  };
  return (
    <>
      {" "}
      {/* BUTTON SIGNUP MODAL */}
      <Button
        color="transparent"
        block
        round
        onClick={() => setSignupModal(true)}
      >
        <Assignment /> Signup
      </Button>
      {/* SIGNUP MODAL START */}
      <Dialog
        classes={{
          root: classes.modalRoot,
          paper: classes.modal + " " + classes.modalSignup,
        }}
        open={signupModal}
        TransitionComponent={Transition}
        keepMounted
        onClose={() => setSignupModal(false)}
        aria-labelledby="signup-modal-slide-title"
        aria-describedby="signup-modal-slide-description"
      >
        <Card plain className={classes.modalSignupCard}>
          <DialogTitle
            id="signup-modal-slide-title"
            disableTypography
            className={classes.modalHeader}
          >
            <Button
              simple
              className={classes.modalCloseButton}
              key="close"
              aria-label="Close"
              onClick={() => setSignupModal(false)}
            >
              {" "}
              <Close className={classes.modalClose} />
            </Button>
            <h3 className={classes.cardTitle + " " + classes.modalTitle}>
              注册
            </h3>
          </DialogTitle>
          <DialogContent
            id="signup-modal-slide-description"
            className={classes.modalBody}
          >
            <GridContainer>
              <GridItem xs={12} sm={5} md={5} className={classes.mlAuto}>
                <InfoArea
                  className={classes.infoArea}
                  title="Marketing"
                  description={
                    <p>
                      We{"'"}ve created the marketing campaign of the website.
                      It was a very interesting collaboration.
                    </p>
                  }
                  icon={Timeline}
                  iconColor="rose"
                />
                <InfoArea
                  className={classes.infoArea}
                  title="Fully Coded in HTML5"
                  description={
                    <p>
                      We{"'"}ve developed the website with HTML5 and CSS3. The
                      client has access to the code using GitHub.
                    </p>
                  }
                  icon={Code}
                  iconColor="primary"
                />
                <InfoArea
                  className={classes.infoArea}
                  title="Built Audience"
                  description={
                    <p>
                      There is also a Fully Customizable CMS Admin Dashboard for
                      this product.
                    </p>
                  }
                  icon={Group}
                  iconColor="info"
                />
              </GridItem>
              <GridItem xs={12} sm={5} md={5} className={classes.mrAuto}>
                <div className={classes.textCenter}>
                  <Button justIcon color="danger">
                    <AppsIcon />
                  </Button>
                  {` `}
                  <Button justIcon color="primary">
                    <ViewDayIcon />
                  </Button>
                  {` `}
                  <Button justIcon color="success">
                    <ViewCarousel />
                  </Button>
                  {` `}
                  <h4 className={classes.socialTitle}>账号注册</h4>
                </div>
                <form className={classes.form} onSubmit={handleSubmit}>
                  <CustomInput
                    id="email"
                    onChange={handleInputChange}
                    formControlProps={{
                      fullWidth: true,
                      className: classes.customFormControlClasses,
                    }}
                    inputProps={{
                      startAdornment: (
                        <InputAdornment
                          position="start"
                          className={classes.inputAdornment}
                        >
                          <Email className={classes.inputAdornmentIcon} />
                        </InputAdornment>
                      ),
                      placeholder: "请输入邮箱...",
                    }}
                  />
                  <CustomInput
                    id="password"
                    onChange={handleInputChange}
                    formControlProps={{
                      fullWidth: true,
                      className: classes.customFormControlClasses,
                    }}
                    inputProps={{
                      startAdornment: (
                        <InputAdornment
                          position="start"
                          className={classes.inputAdornment}
                        >
                          <VpnKeyIcon className={classes.inputAdornment} />
                        </InputAdornment>
                      ),
                      placeholder: "请输入密码...",
                    }}
                  />
                  <CustomInput
                    id="confirm_password"
                    onChange={handleInputChange}
                    formControlProps={{
                      fullWidth: true,
                      className: classes.customFormControlClasses,
                    }}
                    inputProps={{
                      startAdornment: (
                        <InputAdornment
                          position="start"
                          className={classes.inputAdornment}
                        >
                          <LockIcon className={classes.inputAdornment} />
                        </InputAdornment>
                      ),
                      placeholder: "请确认密码...",
                    }}
                  />
                  <FormControlLabel
                    classes={{
                      label: classes.label,
                    }}
                    control={
                      <Checkbox
                        tabIndex={-1}
                        onClick={() => handleToggle(1)}
                        checkedIcon={<Check className={classes.checkedIcon} />}
                        icon={<Check className={classes.uncheckedIcon} />}
                        classes={{
                          checked: classes.checked,
                          root: classes.checkRoot,
                        }}
                      />
                    }
                    label={
                      <span>
                        同意 <a href="#pablo">用户协议</a>、
                        <a href="#">隐私政策</a>
                      </span>
                    }
                  />
                  <div className={classes.textCenter}>
                    <Button round color="primary" type="submit">
                      注册
                    </Button>
                  </div>
                  {message && (
                    <p style={{ color: "red", textAlign: "center" }}>
                      {message}
                    </p>
                  )}
                  {error && (
                    <p style={{ color: "red", textAlign: "center" }}>{error}</p>
                  )}
                </form>
              </GridItem>
            </GridContainer>
          </DialogContent>
        </Card>
      </Dialog>
      {/* SIGNUP MODAL END */}
    </>
  );
}

const mapStateToProps = (state) => ({
  error: state.signup.error,
});

const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(SignupModal);
